<template>  
  <div class="my-schedule-page">  
    <h1>我的日程</h1>  
    <el-calendar v-model="currentDate">  
      <template slot="dateCell" slot-scope="{ data }">  
        <div class="date-cell" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%;">  
          <span style="font-size: 15px; margin-bottom: 5px;">{{ data.day.split('-').pop() }}</span>  
          <ul v-if="events[data.day]" style="list-style: none; padding: 0; margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;">  
            <li v-for="event in events[data.day]" :key="event.id" class="event-item" :title="event.title" @click="viewItem(event)" style="flex: 0 0 auto;font-size:15px;height:15px;width:93%;">  
              {{ event.title }}  
            </li>  
          </ul>  
        </div>  
      </template>  
    </el-calendar>  

    <!-- 查看详情弹窗 -->  
    <el-dialog title="日程详情" :visible.sync="showDetailModal" width="60%">  
      <el-form :model="detailItem" label-width="80px">  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="类型">  
              <el-input v-model="detailItem.type" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="状态">  
              <el-input v-model="detailItem.state" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="标题">  
              <el-input v-model="detailItem.title" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="描述">  
              <el-input v-model="detailItem.desc" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="开始时间">  
              <el-input v-model="detailItem.starttime" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="结束时间">  
              <el-input v-model="detailItem.deadline" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
          <el-col :span="12">  
            <el-form-item label="发起人">  
              <el-input v-model="detailItem.promoter" disabled></el-input>  
            </el-form-item>  
          </el-col>  
          <el-col :span="12">  
            <el-form-item label="部门">  
              <el-input v-model="detailItem.deptname" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
        <el-row>  
            <el-col :span="12">  
            <el-form-item label="会议室">  
              <el-input v-model="detailItem.boardroom" disabled></el-input>  
            </el-form-item>  
          </el-col> 
          <el-col :span="12">  
            <el-form-item label="接收人">  
              <el-input type="textarea" v-model="detailItem.recipient" disabled></el-input>  
            </el-form-item>  
          </el-col>  
        </el-row>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="showDetailModal = false">取 消</el-button>  
      </span>  
    </el-dialog>  
  </div>  
</template>  

<script>  
// 引入你的 API 方法 (例如 getScheduleData)  
import { getScheduleList, getScheduleDetailById ,getMyScheduleList} from '@/api/schedule'; // 假设你的 API 方法放在 @/api/schedule.js 中  
import {addLog} from '@/api/log';
export default {  
  name: 'MySchedule',  
  data() {  
    return {  
      currentDate: new Date(),  
      scheduleData: [], // 存储从 API 获取的完整日程数据  
      events: {}, // 用于存储按日期分组的日程事件  
      showDetailModal: false,  
      detailItem: {},  
              logItem:{
              mn:'',
              opn:'',
              res:''
      },
    };  
  },  
  mounted() {  
    this.fetchScheduleData();  
  },  
  methods: {  
    fetchScheduleData() {  
      getMyScheduleList()  
        .then(response => {  
          this.scheduleData = response.data;  
          this.groupEventsByDate(this.scheduleData);  
        })  
        .catch(error => {  
          console.error('获取日程数据失败', error);  
          this.$message.error('获取日程数据失败');  
        });  
    },  
groupEventsByDate(data) {  
  this.events = {};  
  data.forEach(item => {  
    if (item.starttime && item.deadline) {  
      let startDate = new Date(this.formatDate(item.starttime));  
      let endDate = new Date(this.formatDate(item.deadline));  

      while (startDate <= endDate) {  
        const eventDate = this.formatDate(startDate.toISOString());  

        if (!this.events[eventDate]) {  
          this.events[eventDate] = [];  
        }  
        this.events[eventDate].push(item);  

        startDate.setDate(startDate.getDate() + 1);  
      }  
    }  
  });  

  // 对每天的日程事件进行排序  
  for (const date in this.events) {  
    if (this.events.hasOwnProperty(date)) {  
      this.events[date].sort((a, b) => {  
        const timeA = new Date(a.starttime).getTime();  
        const timeB = new Date(b.starttime).getTime();  
        return timeA - timeB; // 从早到晚排序  
      });  
    }  
  }  
},  
    formatDate(dateString) {  
      // 将 "2025-03-04T16:00:00" 格式化为 "2025-03-04"  
      const date = new Date(dateString);  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0');  
      const day = String(date.getDate()).padStart(2, '0');  
      return `${year}-${month}-${day}`;  
    },  
    viewItem(row) {  
      getScheduleDetailById(row.id)  
        .then(response => {  
          this.showDetailModal = true; // 显示详情弹窗  
          console.log(response.data);  
          this.detailItem = response.data;  
          this.logItem.mn = "viewItem";
          this.logItem.opn = "查看日程详情-我的日程："+this.detailItem.title;
          this.logItem.res = "true";
          addLog(this.logItem);
          if (this.detailItem.starttime) {  
            this.detailItem.starttime = this.detailItem.starttime.replace(/T/g, ' ');  
          }  
          if (this.detailItem.deadline) {  
            this.detailItem.deadline = this.detailItem.deadline.replace(/T/g, ' ');  
          }  
        })  
        .catch(error => {  
          console.log(error);  
          this.logItem.mn = "viewItem";
          this.logItem.opn = "查看日程详情-我的日程："+this.detailItem.title;
          this.logItem.res = "false";
          addLog(this.logItem);
          this.$message.error('查看日程失败');  
        });  
    },  
  },  
};  
</script>  

<style scoped>  
.my-schedule-page {  
  padding: 20px;  
}  
/* 日历内边框 */
.date-cell {  
  position: relative;  
  height: 80px;  
  border: 1px solid rgb(255, 255, 255); /* 修改这里 */  
  padding: 5px;  
  overflow: auto;  
}  

/* 角标 */
.date-cell span {  
  position: absolute;  
  top: 5px;  
  right: 5px;  
  font-size: 12px;  
  color: black;  
}  
/* 单个日程直接展示样式 */
.event-item {  
  font-size: 12px;  
  line-height: 1;  
  margin-bottom: 2px;  
  padding: 2px 4px;  
  background-color: white;  
  border-radius: 4px;  
  cursor: pointer;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
  width: 80%;  
}  

/* 单个日程悬浮样式 */
.event-item:hover {  
  background-color: #dce35c;  
}  
/* 日历外边框 */
/deep/.el-calendar-day {  
  height: 110px !important;  
  border: 1px solid white!important;; /* 这里也添加边框样式 */  
}  

/deep/.el-calendar-table .el-calendar-day {  
    border:none;  
}  
/deep/.el-calendar-box{  
    border: 1px solid white;  
}  

/deep/.el-calendar{
  background-color: #89cf88;
}
/* 可以根据你的需要添加更多的样式 */  
</style>  